<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
     width="60%"
    :visible.sync="visible">
    <el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="楼宇名称" prop="buildingName"
                :rules="[
                  {required: true, message:'楼宇名称不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.buildingName" placeholder="请填写楼宇名称"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="楼宇状态" prop="buildingStatus"
                :rules="[
                  {required: true, message:'楼宇状态不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.buildingStatus" placeholder="请选择"  style="width: 100%;">
                    <el-option label="合作中" value="1">合作中</el-option>
                    <el-option label="沟通中" value="2">沟通中</el-option>
                    <el-option label="测试过" value="4">测试过</el-option>  
                    <el-option label="禁止进入" value="3">禁止进入</el-option> 
                  </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="靠近的铁线站路" prop="subwayLine"
                :rules="[
                  {required: true, message:'靠近的铁线站路不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.subwayLine" placeholder="请填写靠近的铁线站路"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="靠近的地铁站" prop="metroStation"
                :rules="[
                  {required: true, message:'靠近的地铁站不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.metroStation" placeholder="请填写靠近的地铁站"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="是否有门禁" prop="isDoorcontrol"
                :rules="[
                  {required: true, message:'是否有门禁不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.isDoorcontrol" placeholder="请选择"  style="width: 100%;">
                    <el-option label="是" value="是">是</el-option>
                    <el-option label="否" value="否">否</el-option> 
                      </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="是否需要刷卡" prop="isElevatorswiping"
                :rules="[
                  {required: true, message:'是否需要电梯刷卡不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.isElevatorswiping" placeholder="请选择"  style="width: 100%;">
                    <el-option label="是" value="是">是</el-option>
                    <el-option label="否" value="否">否</el-option> 
                      </el-select>
           </el-form-item>
        </el-col>
         <el-col :span="12">
            <!-- <el-form-item label="区域" prop="region"
                :rules="[
                  {required: true, message:'区域不能为空', trigger:'blur'}
                 ]">
                <el-select v-model="inputForm.region" placeholder="请选择"  style="width: 100%;">
                          <el-option
                            v-for="item in regionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                      </el-select>
           </el-form-item> -->

           
              <el-form-item label="省市地址" prop="region" :rules="[]">
                <CityPicker
                    style="width: 100%"
                    :value="inputForm.region"
                    :clearable="true"
                    :accordion="true"
                    @getValue="
                    (value) => {
                      inputForm.region = value;
                    }
                  "
                  />
              </el-form-item>
            
        </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="contactAddress" :rules="[]">
                <el-input v-model="inputForm.contactAddress" ref="handleinput" id="handleinput" placeholder="请填写地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度" prop="latitude" :rules="[
                 ]">
                <el-input v-model="inputForm.latitude" disabled placeholder="请填写经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="longitude" :rules="[
                 ]">
                <el-input v-model="inputForm.longitude" disabled placeholder="请填写纬度"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="地图" prop="">
                <div ref="container" id="container"></div>
              </el-form-item>
            </el-col>
        <!-- <el-col :span="12">
            <el-form-item label="联系地址" prop="contactAddress"
                :rules="[
                  {required: true, message:'联系地址不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.contactAddress" placeholder="请填写联系地址"     ></el-input>
           </el-form-item>
        </el-col> -->
       
        <el-col :span="12">
            <el-form-item label="备注信息" prop="remarks"
                :rules="[
                 ]">
          <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"     ></el-input>
           </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import CityPicker from "@/components/cityPicker";
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        Allarea:[],
        inputForm: {
          id: '',
          buildingName: '',
          buildingStatus: '',
          subwayLine: '',
          metroStation: '',
          isDoorcontrol: '',
          isElevatorswiping: '',
          contactAddress: '',
          longitude: '',
          latitude: '',
          region: '',
          remarks: ''
        },
        regionList: [],
        markersArray:[]
      }
    },
    created() {
      this.getBuildingInfoAllRegion()
    },
    components: {
      CityPicker
    },
    methods: {
      init (method, id) {
        this.method = method
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建楼宇管理`
        
          // setTimeout(()=>{
             
          // },1000)
          
        } else if (method === 'edit') {
          this.title = '修改楼宇管理'
        } else if (method === 'view') {
          this.title = '查看楼宇管理'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/tbuildinginfo/tBuildingInfo/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.tBuildingInfo)
              console.log(this.inputForm.latitude, this.inputForm.longitude);
              this.initMap(this.inputForm.latitude, this.inputForm.longitude);
              this.loading = false
            })
          } else {
             this.initMap()
          }
        })
      },
       // 获取所有区域列表数据
      getBuildingInfoAllRegion () {
        this.$http({
          url: '/tbuildinginfo/tBuildingInfo/getBuildingInfoAllRegion',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            data.page.forEach(e => {
              this.regionList.push({
                value: e.region,
                label: e.region
              })
            });
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/tbuildinginfo/tBuildingInfo/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              this.loading = false
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      initMap(longitude, latitude) {

        var that = this;
        let address = "";
        let lat = "30.496039";
        let logt = "114.418665";
        var center = new TMap.LatLng(39.984104, 116.307503);
        
        //     //初始化地图
        //     var map = new TMap.Map("container", {
        //         rotation: 20,//设置地图旋转角度
        //         pitch:30, //设置俯仰角度（0~45）
        //         zoom:12,//设置地图缩放级别
        //         center: center//设置地图中心点坐标
        //     });
        if (!longitude) {
          let lat = latitude;
          let logt = longitude;
        }

        if (that.inputForm.latitude === '') {
          var center = new qq.maps.LatLng(lat, logt);
        } else {
          var center = new qq.maps.LatLng(that.inputForm.longitude, that.inputForm.latitude);
        }
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        

        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });

        that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        }); //此处是点击地图后生成的地标名称
        var geocoder = new qq.maps.Geocoder({
          complete: function (res) {
            console.log(res);
            that.deleteOverlays();
            map.setCenter(res.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: res.detail.location,
            });
            that.markersArray.push(marker);
          },
        });

        qq.maps.event.addListener(map, "click", function (event) {
          that.deleteOverlays();
          that.inputForm.longitude = event.latLng.getLat();
          that.inputForm.latitude = event.latLng.getLng();
          var position = new qq.maps.LatLng(that.inputForm.longitude, that.inputForm.latitude);
          var marker = new qq.maps.Marker({
            map: map,
            position: position
          });
          that.markersArray.push(marker);
        });
        document.getElementById("handleinput").addEventListener("blur", function () {
          console.log("1111");
          geocoder.getLocation(that.inputForm.contactAddress);
        });
      },
      deleteOverlays() {
        if (this.markersArray) {
          for (var i in this.markersArray) {
            this.markersArray[i].setMap(null);
          }
          this.markersArray.length = 0;
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  #container {
    width: 750px;
    height: 500px;
  }
</style>